<!--
 * @Description: 身份模板管理-列表
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-05
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-04-08
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="模板名称">
            <a-input v-model:value="searchParam.templateName" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="类型">
            <a-select v-model:value="searchParam.templateType" allowClear :options="templateTypeOptions" placeholder="请选择" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <a-col :span="24">
          <a-row justify="end">
            <a-button type="primary" @click="goAdd()">
              <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
              新建模板
            </a-button>
          </a-row>
        </a-col>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="goDetail(record)">详情</a>
              <a-divider type="vertical" />
              <a @click="goEdit(record)">编辑</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import type { SelectProps } from 'ant-design-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestGetTemplateList } from '/@/api/business/identity/template'
  import { TemplateTypeDesc, TemplateTypeEnum } from '/@/api/business/identity/template/enum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDateTime } from '/@/utils/date'

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({ templateName: '', templateType: TemplateTypeEnum.PERSON })

  /** 类型选项 */
  const templateTypeOptions = ref<SelectProps['options']>(Object.entries(TemplateTypeDesc).map((item) => ({ label: item[1], value: parseInt(item[0]) })))

  /** 表格列配置 */
  const columns = [
    { title: '名称', dataIndex: 'templateName' },
    { title: '类型', dataIndex: 'templateType', customRender: ({ record }) => TemplateTypeDesc[record.templateType] },
    { title: '更新时间', dataIndex: 'createTime', customRender: ({ record }) => formatToDateTime(parseInt(record.createTime)) },
    { title: '操作', key: 'action' },
  ]

  /** 表格hook */
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetTemplateListTypes.IRequest, GetTemplateListTypes.IResponse[]>(searchParam, requestGetTemplateList)

  /** 初始化查询列表 */
  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.templateName = ''
    searchParam.templateType = TemplateTypeEnum.PERSON
  }

  /**
   * 查询
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 路由跳转：新增模板
   */
  const goAdd = () => {
    router.push({
      path: '/idtemplate/manage/add',
      query: { isEdit: 1 },
    })
  }

  /**
   * 路由跳转：编辑模板
   * @param record 身份模板
   */
  const goEdit = (record: GetTemplateListTypes.IResponse) => {
    router.push({
      path: '/idtemplate/manage/add',
      query: { templateId: record.id, isEdit: 1 },
    })
  }

  /**
   * 路由跳转：模板详情
   * @param record 身份模板
   */
  const goDetail = (record: GetTemplateListTypes.IResponse) => {
    router.push({
      path: '/idtemplate/manage/add',
      query: { templateId: record.id, isEdit: 0 },
    })
  }
</script>

<style lang="less" scoped></style>
